﻿.khung-doi-mat-khau {

}
    .khung-doi-mat-khau > form {

    }
        .khung-doi-mat-khau > form > ul {

        }
            .khung-doi-mat-khau > form > ul > li {
                margin-bottom: 10px;
                position: relative;
                width: 200px;
            }
                .khung-doi-mat-khau > form > ul > li > label {
                    font-size: 14px;
                    color: #555;
                    display: block;
                    margin-bottom: 3px;
                }
                .khung-doi-mat-khau > form > ul > li > input {
                    width: calc(100% - 12px);
                    height: 15px;
                    border: 1px solid #ddd;
                    outline: none;
                    padding: 5px;
                }
                    .khung-doi-mat-khau > form > ul > li > input.loi {
                        border-color: #f60;
                    }
                    .khung-doi-mat-khau > form > ul > li > input:focus {
                        border-color: #08c;
                    }
                .khung-doi-mat-khau > form > ul > li > .alert {
                    position: absolute;
                    display: inline-block;
                    padding: 5px;
                    border: 1px solid #f60;
                    background: #fee;
                    font-size: 11px;
                    top: calc(100% + 4px);
                    right: 20px;
                    z-index: 1;
                    max-width: calc(100% - 40px);
                }
                    .khung-doi-mat-khau > form > ul > li > .alert:before,
                    .khung-doi-mat-khau > form > ul > li > .alert:after {
                        content: '';
                        display: block;
                        position: absolute;
                        border: 4px solid transparent;
                    }
                    .khung-doi-mat-khau > form > ul > li > .alert:before {
                        border-bottom-color: #f60;
                        top: -9px;
                        right: 10px;
                    }
                    .khung-doi-mat-khau > form > ul > li > .alert:after {
                        border-bottom-color: #fee;
                        top: -8px;
                        right: 10px;
                    }
                .khung-doi-mat-khau > form > ul > li.button {
                    margin-bottom: 0px;
                    text-align: right;
                }
                    .khung-doi-mat-khau > form > ul > li.button > input[type="submit"] {
                        width: auto;
                        border: 1px solid #ddd;
                        background: -webkit-linear-gradient(top, white, #f8f8f8);
                        height: auto;
                        padding: 10px;
                    }
                        .khung-doi-mat-khau > form > ul > li.button > input[type="submit"]:focus {
                            border-color: #08c;
                    }